<template>
  <div class="news-detail-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span>
        <router-link to="/">首页</router-link>
      </span>
      <span class="separator">/</span>
      <span>
        <router-link to="/news-list">科研新闻</router-link>
      </span>
      <span class="separator">/</span>
      <span class="current">新闻详情</span>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 标题 -->
      <h1 class="news-title">{{ currentNews.title }}</h1>

      <!-- 元数据（发布时间、编辑等） -->
      <div class="news-meta">
        <span>发布时间：{{ currentNews.date }}</span>
        <span>责任编辑：{{ currentNews.editor || '无' }}</span>
        <span>审核：{{ currentNews.reviewer || '无' }}</span>
        <span>阅读量：{{ currentNews.views }}</span>
      </div>

      <!-- 新闻主图 -->
      <div class="news-img-container">
        <img :src="currentNews.imageUrl" :alt="currentNews.title" class="news-img">
      </div>

      <!-- 正文内容 -->
      <div class="news-content">
        <p v-for="(para, idx) in currentNews.contentParagraphs" :key="idx" class="content-paragraph">
          {{ para }}
        </p>
      </div>

      <!-- 返回按钮 -->
      <button class="back-btn" @click="$router.push('/news-list')">
        <i class="icon-arrow-left"></i> 返回列表
      </button>
    </div>
  </div>
</template>

<script>
// 模拟新闻详情数据（补充完整元数据字段）
const newsDetailData = [
  {
    id: 1,
    title: '低空研究院在无人机通信领域取得重大突破',
    date: '2024-05-18 09:30', // 精确到时间
    editor: '张明',
    reviewer: '李教授',
    views: 1258,
    imageUrl: require('@/assets/images/news.png'), // 确保图片路径正确
    contentParagraphs: [
      '近日，我院低空通信技术团队在无人机自组织网络研究中取得关键进展，成功研发出一种基于动态频谱感知的抗干扰通信协议。',
      '该协议解决了传统无人机通信在复杂电磁环境下易受干扰、传输不稳定的问题，野外测试表明，通信可靠性提升至99.2%，较现有技术提高37%。',
      '相关成果已发表于国际顶级期刊IEEE Transactions on Vehicular Technology（影响因子6.234），并申请发明专利3项。',
      '团队负责人表示，该技术可广泛应用于应急通信、边境巡逻等场景，目前已与某航天企业达成技术转化意向。项目后续将持续优化算法，提升在极端天气下的适应能力。'
    ]
  },
  {
    id: 2,
    title: '2024低空经济学术论坛在我校成功举办',
    date: '2024-04-26 14:15',
    editor: '王华',
    reviewer: '赵主任',
    views: 986,
    imageUrl: require('@/assets/images/chenli.jpg'),
    contentParagraphs: [
      '4月22日至23日，由我校主办的"2024低空经济学术论坛"在学术交流中心顺利召开，来自国内外56所高校、28家企业的300余位代表参会。',
      '论坛以"创新驱动低空经济高质量发展"为主题，设置了6个平行分论坛，围绕无人机物流、空域智能化管理、低空安全监管等议题展开讨论。',
      '本次论坛共收到论文128篇，评选出优秀论文10篇，促成校企合作意向8项，为推动低空经济领域的产学研融合奠定了坚实基础。'
    ]
  }
]

export default {
  name: 'GuestNewsDetail',
  data() {
    return {
      currentNews: {}
    }
  },
  mounted() {
    // 获取路由参数中的新闻ID并匹配数据
    const newsId = Number(this.$route.params.id)
    this.currentNews = newsDetailData.find(item => item.id === newsId) || {
      title: '新闻不存在',
      contentParagraphs: ['未找到对应的新闻内容，请返回列表页查看其他新闻。']
    }
  }
}
</script>

<style scoped>
/* 容器样式 */
.news-detail-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  box-sizing: border-box;
}

/* 面包屑导航 */
.breadcrumb {
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.breadcrumb a {
  color: #666;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #0066cc;
  text-decoration: underline;
}

.separator {
  margin: 0 8px;
  color: #ccc;
}

.current {
  color: #333;
  font-weight: 500;
}

/* 主内容区 */
.main-content {
  max-width: 800px;
  margin: 0 auto;
}

/* 标题 */
.news-title {
  font-size: 26px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin: 0 0 30px;
  line-height: 1.4;
}

/* 元数据 */
.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: #888;
  font-size: 14px;
  margin-bottom: 30px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

/* 新闻图片容器 */
.news-img-container {
  text-align: center;
  margin: 0 0 40px;
  /* 新增样式确保容器宽度100% */
  width: 100%;
}

/* 新闻图片 */
.news-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* 新增自动margin确保居中 */
  margin: 0 auto;
  display: block;
}

/* 正文内容 */
.news-content {
  color: #333;
  line-height: 1.8;
  font-size: 16px;
}

.content-paragraph {
  margin: 0 0 20px;
  text-indent: 2em;
  /* 首行缩进2字符 */
}

/* 返回按钮 */
.back-btn {
  margin: 40px 0 20px;
  padding: 10px 20px;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background-color: #0052a3;
}

.icon-arrow-left {
  margin-right: 5px;
}
</style>